const { Row, Col, Menu, message, Spin, Button, Icon, Select, Input } = antd;
const Option = Select.Option;
const imgUrl = 'http://api.moodwo.com/public/index.php/picture/index?id=';

let pageInfo = {
    page_id: 0,
    page_data: [

    ]
};

const Admin_main = React.createClass({
    getInitialState() {
        return {
            current: 'other',
            edit_block_data : false,
            loading: false,
            add_fenlei:false,
            page_id: 0,
            page_name: '',
            pageFenlei: [],
            add_fenlei_text: '',
            select_fenlei_default: {key: 0, label:'选择分类'}
        };
    },
    handleClick(e) {
        console.log('click ', e);
        this.setState({
            current: e.key
        });
    },
    showBlockSetor(block_data=false){
        if(this.state.edit_block_data){
            this.setState({edit_block_data: false});
            setTimeout(()=>this.setState({edit_block_data: block_data}),100);
            $('html, body').animate({
                scrollTop: 0
            }, 200);
        }else{
            this.setState({edit_block_data: block_data});
        }
    },
    componentDidMount(){
        
    },
    getPageInfo(id=false){
        let url = getBaseUrl() + '/Admin/AppBanners/getPage';
        let page_id = id ? id : this.state.page_id;
        let data = {
            id: page_id
        };
        this.setState({loading: true, page_id: page_id});
        _post(url,jQuery.param(data),{
            data_back: function(data){
                if(data.status){
                    pageInfo = data.info;
                    this.setState({loading: false});
                }else{
                    message.error("获取数据失败");
                    this.setState({loading: false});
                }
            }.bind(this),
            error: function(){
                message.error("获取数据失败");
                this.setState({loading: false});
            }});
    },
    add_block(){
        pageInfo.page_data.push({
            block_id: pageInfo.page_data.length + 1,
            block_name: '分类一图三产品',
            block_type: 6112,
            banners: [
                {
                    key:1, id:0 ,name: '', width: '100%', height: 330,
                    product_home: {
                        max: 3,
                        product_ids: []
                    },
                    group_product_list: {
                        p_ids: [],
                        sku: {

                        }
                    }
                }
            ]
        });
       
    },
    getFenlei(val){
        //获取分类列表
        let notes = val ? val :this.state.page_notes;
        let url = getBaseUrl() + '/Admin/AppBanners/getPageFenlei';

        let data = {
            notes: notes
        };

        _post(url,jQuery.param(data),{
            data_back: function(data){
                if(data.status){
                    this.setState({pageFenlei: data.info, fenlei_select_show: false, page_notes: notes});
                    setTimeout(()=>this.setState({fenlei_select_show: true}),100);
                }else{
                    message.error(data.info);
                    this.setState({loading: false});
                }
            }.bind(this),
            error: function(){
                message.error("分类获取失败");
                this.setState({loading: false});
            }.bind(this)});
    },
    onClickAddFenlei(){
        this.setState({add_fenlei: true});
    },
    onCloseAddFenlei(){
        this.setState({add_fenlei: false,add_fenlei_text: ''});
    },
    onAddFenleiTextChange(event){
        this.setState({add_fenlei_text: $.trim(event.target.value)});
    },
    onOkAddFenlei(){
        if(!this.state.page_notes){
            message.error('数据异常，无法添加!');
            this.setState({add_fenlei: false,add_fenlei_text: ''});
            return;
        }
        let name = this.state.add_fenlei_text;
        if(name==''){
            message.error('分类名称不能为空');
            this.refs.add_fenlei_input.refs.input.focus();
        }

        let url = getBaseUrl() + '/Admin/AppBanners/addPageFenlei';
        let data = {
            name: name,
            notes: this.state.page_notes
        };

        this.setState({loading: true});
        _post(url,jQuery.param(data),{
            data_back: function(data){
                if(data.status){
                    message.success('添加成功');
                    this.setState({loading: false});
                    this.getFenlei();
                }else{
                    message.error(data.info);
                    this.setState({loading: false});
                }
            }.bind(this),
            error: function(){
                message.error("添加失败");
                this.setState({loading: false});
            }.bind(this)});


        this.setState({add_fenlei: false,add_fenlei_text: ''});
    },
    onChangeFenlei(value){
        this.setState({page_name: value.label});
        this.getPageInfo(value.key);
    },
    onDeleteFenlei(){
        let url = getBaseUrl() + '/Admin/AppBanners/deletePage';
        let data = {
            page_id: pageInfo.page_id
        };
        this.setState({loading: true, select_fenlei_default: {key: 0, label:'选择分类'}});

        _post(url,jQuery.param(data),{
            data_back: function(data){
                if(data.status){
                    message.success('删除成功');
                    this.setState({page_id: 0, loading: false});
                    this.getFenlei();
                }else{
                    message.error(data.info);
                    this.setState({loading: false});
                }
            }.bind(this),
            error: function(){
                message.error("删除失败");
                this.setState({loading: false});
            }.bind(this)});
    },
    onFenleiTypeChange(value){
        this.getFenlei(value.key);
    },
    render(){
        const pageData = pageInfo.page_data;
        const block_list = pageData.map(function(val,index){
            return(
                <div className="block" style={{height: 620}} onClick={()=>this.showBlockSetor(val)}>
                    <div className="banner" style={{width:'100%', height:330}}>
                        {pageData[index].banners[0].id==0 ? null :
                            <img src={imgUrl+val.banners[0].id} />
                        }
                        <div className="banner-sp" style={{width:200,height:250,left:30,top:340}}><span>产品1</span></div>
                        <div className="banner-sp" style={{width:200,height:250,left:250,top:340}}><span>产品2</span></div>
                        <div className="banner-sp" style={{width:200,height:250,left:470,top:340}}><span>产品3</span></div>
                    </div>
                </div>
            );
        }.bind(this));
        const options = this.state.pageFenlei.map(function(val){
            return <Option value={val.id}>{val.name}</Option>
        });
        const mobile_wrap = this.state.page_id == 0 ? null : [
            <Row>
                <h3 style={{marginTop:20,marginLeft:20}}>分类名称：{this.state.page_name} <Button type="primary" onClick={this.onDeleteFenlei}>删除此分类</Button></h3>
                <Spin spinning={this.state.loading}>
                    <div className="mobile-wrap">
                        <div className="head-wrap">
                            <center>萌屋</center>
                        </div>
                        <div className="nav-wrap">
                            <ul>
                                <li>首页</li>
                                <li>奶粉</li>
                                <li>孕用</li>
                                <li>看护</li>
                                <li>洗护</li>
                                <li>童装</li>
                                <li>玩具</li>
                            </ul>
                        </div>
                        <ul className="block-wrap">
                            <li>
                                {block_list}
                                <div className="block2" style={{height: 620}}>
                                    <div className="add-block" onClick={this.add_block}>
                                        <div className="button">
                                            <Icon type="plus" />
                                            <div className="tip-text">添加block</div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </Spin>
                {!this.state.edit_block_data ? null : <Block_setor block={this.state.edit_block_data}
                                                                   hide={()=>this.showBlockSetor()}
                                                                   saveBack={this.getPageInfo} />}
            </Row>
        ];
        const add = this.state.page_notes ? [
            this.state.add_fenlei ? [
                <div style={{display: "inline-block", marginLeft:20}}>
                    <Input ref="add_fenlei_input" value={this.state.add_fenlei_text} onChange={this.onAddFenleiTextChange} placeholder="分类名称" style={{width:120, marginRight:10}} />
                    <Button type="primary" style={{marginRight:10}} onClick={this.onOkAddFenlei}>确定</Button>
                    <Button type="default" onClick={this.onCloseAddFenlei}>取消</Button>
                </div>
            ] : <Button type="primary" style={{marginLeft:20}} onClick={this.onClickAddFenlei}>添加分类</Button>
        ] : null;
        return(
            <Col span="24">
                <Row>
                    <Col>
                        <Menu onClick={this.handleClick}
                              selectedKeys={[this.state.current]}
                              mode="horizontal">
                            <Menu.Item key="shouye">
                                <a href={getBaseUrl()+'/Admin/AppBanners/index'}>首页</a>
                            </Menu.Item>
                            <Menu.Item key="other">
                                <a href={getBaseUrl()+'/Admin/AppBanners/other'}>其他</a>
                            </Menu.Item>
                        </Menu>
                    </Col>
                </Row>
                <Row>
                    <Col>
                        <div className="right-main">
                            <Row>
                                <Col style={{marginTop:20,marginLeft:20}}>
                                        <Select labelInValue defaultValue={{key: 0, label:'选择类型'}} style={{ width: 150,marginRight:20 }} onChange={this.onFenleiTypeChange} >
                                            <Option value='APP分类布局'>APP分类布局</Option>
                                            <Option value='APP地区分类布局'>APP地区分类布局</Option>
                                            <Option value='APP其他分类布局'>APP其他分类布局</Option>
                                        </Select>
                                    {!this.state.fenlei_select_show ? null : [
                                        <Select labelInValue defaultValue={this.state.select_fenlei_default} style={{ width: 120 }} onChange={this.onChangeFenlei}>
                                            {options}
                                        </Select>
                                    ]}
                                    {add}
                                </Col>
                            </Row>
                            {mobile_wrap}
                        </div>
                    </Col>
                </Row>
            </Col>
        );
    }
});